<template>
    <view class="van-circle"
	:style="{
		width: size,
		height: size,
		borderColor: layerColor
	}">
		<view class="van-circl-wrap flex-wrap"
		:style="{
			width: size,
			height: size
		}">
			<view class="van-circl-left">
				<view class="van-circl-progress"
				:style="{
					width: size,
					height: size,
					transform: 'rotate(' + ((value > 50 ? value - 50 : 0)*3.6 - 45) + 'deg)'
				}"></view>
			</view>
			<view class="van-circl-right">
				<view class="van-circl-progress"
				:style="{
					width: size,
					height: size,
					transform: 'rotate(' + ((value >= 50 ? 50 : value)*3.6 - 45) + 'deg)'
				}"></view>
			</view>
		</view>
		<slot v-if="!text"></slot>
		<view class="van-circl-text flex-wrap flex-middle flex-center">
			<text>{{text}}</text>
		</view>
	</view>
</template>

<script>
import { parse, stringify } from '@/assets/js/util'
export default {
    model: {
        prop: 'value',
        event: 'change'
    },
    data(){
        return {
        }
    },
	watch: {
		rate(val) {
			this.$emit('change', val)
		}
	},
    props: {
        value: {
            type: Number,
            default: 0
        },
		rate: {
		    type: Number,
		    default: 0
		},
		size: {
            type: String,
            default: ''
        },
		layerColor: {
            type: String,
            default: '#999999'
        },
		fill: {
            type: String,
            default: ''
        },
		text: {
            type: String,
            default: ''
        }
    },
    methods: {
    }
}
</script>

<style lang="scss" scoped>
    .van-circle {
		text-align: center;
		position: relative;
		border-radius: 50%;
		border-width: 4px;
		border-style: solid;
		.van-circl-wrap{
			position: absolute;
			left: -4px;
			top: -4px;
			.van-circl-left,.van-circl-right{
				position: relative;
				width: 50%;
				height: 100%;
				overflow: hidden;
			}
			.van-circl-progress{
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 50%;
				border: 4px solid var(--color);
				border-left-color: transparent;
				border-top-color: transparent;
				transition: transform 0.3s;
			}
			.van-circl-right .van-circl-progress{
				right: 0;
				left: auto;
				border: 4px solid var(--color);
				border-right-color: transparent;
				border-bottom-color: transparent;
			}
		}
		.van-circl-text{
			position: relative;
			width: 100%;
			height: 100%;
		}
    }
</style>